  <template>
	<view class="zai-box">
        <scroll-view scroll-y class="page">
            <view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
				<image src="/static/water.png" mode='aspectFit' class="zai-logo "></image>
				<view class="zai-title text-shadow ">MWS 水务管理平台</view>
			</view>
            <view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
				<block >
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view>
						<input placeholder="请输入账号" name="input" v-model="userName"></input>
					</view>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view>
						<input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password" />						
					</view>
					<view class="padding text-center margin-top">
						<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="onLogin"><text space="emsp">{{loading ? "进入中...":" 进入 "}}</text>
						</button>
					</view>
				</block>
	
				<!-- #ifdef APP-PLUS -->
				<view class="padding flex flex-direction  text-center">
					当前版本:{{version}}
				</view>
				<!-- #endif -->
				
            </view>
        </scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/water.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">登录中...</view>
		</view>
    </view>

</template>

<script>
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	import { mapActions } from "vuex"
    import configService from '@/common/service/config.service.js';
	
    export default {		
        data() {
            return {
				shape:'',//round 圆形
				loading: false,
				jwid: '',
				appid: '',
				openid:'',
				userName: '******',
				password: '************',
				phoneNo: '',
				smsCode: '',
				code: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version:'',
				//第三方登录相关信息
				thirdType:"",
				thirdLoginInfo:"",
				thirdLoginState:false,
				bindingPhoneModal:false,
				thirdUserUuid:'',
				url: {
					bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone',
					appUrl: '/mp/jwWebJwid/getJwAppid',
					openUrl:'/mp/jwWebJwid/openLogin',
				}
            };
        },
		onLoad:function(){
			// #ifdef APP-PLUS
			var that=this
			plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
				that.version=wgtinfo.version
			});			
			// #endif
		},
		created(){
			//alert("created-0-"+location.href);
			let queryStr = decodeURIComponent(this.$route.query.query);
			if(queryStr){
				let jwid=this.getUrlKey("jwid");
				let appid=this.getUrlKey("appid");
				this.jwid=jwid;
				this.appid=appid;
			}
			
			var paramObj = this.getUrlParamObj(queryStr);
			if(paramObj){
				this.jwid=paramObj.jwid;
				this.appid=paramObj.appid;
				//alert("lat:"+paramObj.jwid)
			}
			//alert("created-1-"+this.jwid);
			
			let code=this.getUrlKey("code");			
			//alert("code-2-"+code)
		   if(code){
			    this.code=code;
				this.onLogin();
		    }else{
		        this.getCodeApi();
		    }
		},
		computed: {
		     
		},
        methods: {
			 ...mapActions([ "mLogin","PhoneLogin","ThirdLogin" ]),
			onLogin: function (){
			        let loginParams = {
			          username:this.userName,
			          password:this.password,
					  jwid: this.jwid,
					  appid: this.appid,
					  code: this.code,
					  openid: this.openid
			        }
					// if(!this.jwid){
					// 	return;
					// }
					this.loading=true;
			        this.mLogin(loginParams).then((res) => {
					  this.loading=false;
					  //alert("res.success>"+res.data.success)
			          if(res.data.success){
						 // #ifdef APP-PLUS
						  this.saveClientId()
						 // #endif
						 // #ifndef APP-PLUS
						  this.$tip.success('成功!')
						  this.$Router.replaceAll({name:'home'})
						 // #endif
						}else{
			              alert(res.data.message);
			            }
			        }).catch((err) => {
			          let msg = err.data.message || "请求出现错误，请稍后再试"
			          this.loading=false;
					  this.$tip.alert(msg);
					  this.getCodeApi();
			        }).finally(()=>{
					  this.loading=false;
				})
			},
			saveClientId(){
				var info = plus.push.getClientInfo();
				var cid = info.clientid;
				this.$http.get("/sys/user/saveClientId",{params:{clientId:cid}}).then(res=>{
					console.log("res::saveClientId>",res)
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({name:'home'})
				})
			},			
			loginSuccess() {
			  // 登陆成功，重定向到主页
			  this.$Router.replace({name:'home'})
			},			
			getCodeApi(){ //获取code
				if(this.appid){
					let urlNow=decodeURIComponent(window.location.href);
					if(urlNow.indexOf("/pages/login/login") !== -1){
						let hostUrl=urlNow.substring(0,urlNow.indexOf("/pages/login/login"));
						if(hostUrl.endsWith("/")){
							urlNow=hostUrl+"pages/login/login&jwid="+this.jwid+"&appid="+this.appid;
						}else{
							urlNow=hostUrl+"/pages/login/login&jwid="+this.jwid+"&appid="+this.appid;
						}
					}
					//console.log("window.location.href：",window.location.href);
					// https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html let scope='snsapi_userinfo';    //snsapi_userinfo snsapi_base   //静默授权 用户无感知								   
					let url= 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.appid+'&redirect_uri='+encodeURIComponent(urlNow)+'&response_type=code&scope=snsapi_base&state=lc#wechat_redirect';
					//alert("get-weixin-code-0:"+url)
					window.location.href = url
				}else{
					let param= {
						jwid: this.jwid,
						appid: this.appid
					}
					this.$http.get(this.url.appUrl, {params:{jwid:this.jwid,appid:this.appid}},
						).then(res=>{
						if (res.data.success) {
							let appidStr=res.data.result;
							let urlNow=encodeURIComponent(window.location.href);
							if(hostUrl.endsWith("/")){
								urlNow=hostUrl+"pages/login/login&jwid="+this.jwid+"&appid="+this.appid;
							}else{
								urlNow=hostUrl+"/pages/login/login&jwid="+this.jwid+"&appid="+this.appid;
							}	
							//alert("urlNow>weixin-code-1:"+urlNow)
							// let scope='snsapi_userinfo';    //snsapi_userinfo snsapi_base   //静默授权 用户无感知								   
							let url= 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appidStr+'&redirect_uri='+encodeURIComponent(urlNow)+'&response_type=code&scope=snsapi_base&state=lc#wechat_redirect';
							//alert("get-weixin-code-1:"+url)	
							window.location.href = url
						}
					}).catch(err => {
						console.log(err);
					});
				}				
			},					
			getUrlParamObj(paramStr){
				var paramObj = null;
				if(paramStr){
					var queryObj = eval('(' + paramStr + ')');
					if(queryObj){
						paramObj={};
						let paramJsonstr = queryObj.param;
						let paramArr= paramJsonstr.split('&');
						for(var pi in paramArr){
							let item=paramArr[pi];
							let itemArr= item.split('=');
							paramObj[itemArr[0]]=itemArr[1];
						}
					}
				}
				return paramObj;
			},
			getUrlKey(name){//获取url 参数	
				
			   return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
			}
        },		
    }
</script>

<style>
    .login-paddingtop {
        padding-top: 100upx;
    }

    .zai-box {
        padding: 0 20upx;
        padding-top: 100upx;
        position: relative;
    }

    .zai-logo {
        width: 200upx;
        height: 150px;
    }

    .zai-title {
       font-size: 58upx;
       color: #000000;
       text-align: center;
    }

    .input-placeholder, .zai-input {
        color: #94afce;
    }

    .zai-label {
        padding: 60upx 0;
        text-align: center;
        font-size: 30upx;
        color: #a7b6d0;
    }

    .zai-btn {
        background: #ff65a3;
        color: #fff;
        border: 0;
        border-radius: 100upx;
        font-size: 36upx;
    }

    .zai-btn:after {
        border: 0;
    }

    /*按钮点击效果*/
    .zai-btn.button-hover {
        transform: translate(1upx, 1upx);
    }

</style>
